<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="css/jquery.mobile.structure-1.3.0.css">
<link rel="stylesheet" href="temas/clasico.css">

<script type="text/javascript" src="js/jquery-1.9.1.js"></script>	
<script type="text/javascript" src="js/jquery.mobile-1.3.0.js"></script>
<script type="text/javascript" src="js/cordova-2.5.0.js" charset="utf-8"></script>

<script type="text/javascript" charset="utf-8">
	var db = null;
	var email = "";
	var pass = "";
	
	function iniciar() {
		document.addEventListener("deviceready", dispositivoListo, false);
	}

	function dispositivoListo() {
		db = window.openDatabase("Muni", "1.0", "DB Muni", 200000);
	}

	function saveData() {
 		email = $("#email").val();
 		pass  = $("#password").val();
		
		console.log("### Municipality ###: saveData");
		db.transaction(populateDB, errorCB, successCB);
	}

	function populateDB(tx) {
		tx.executeSql("DROP TABLE IF EXISTS tbcustomer");
		tx.executeSql("CREATE TABLE IF NOT EXISTS tbcustomer (id INTEGER PRIMARY KEY AUTOINCREMENT, email TEXT NOT NULL, pass TEXT NOT NULL)");
		tx.executeSql("INSERT INTO tbcustomer(email, pass) VALUES ('" + email + "','" + pass + "')");
	}

	function errorCB(err) {
		alert("En breve lo atenderemos: " + err.code);
	}

	function successCB() {
		alert("Bienvenido!");
	}
</script>
</head>

<body onload="iniciar()">

	<div data-role="page" data-theme="a">

		<div data-role="header" data-position="fixed">
			<h1>PI PhoneGap</h1>
		</div>

		<div data-role="content">
			<p>Grabado en SQLite</p>

			<form>
				<ul data-role="listview" data-inset="true">
					<li data-role="list-divider">Grabar registro</li>
					<li><label for="email">Email:</label>
						<input type="text" id="email" />
					</li>
					<li><label for="password">Password:</label>
						<input type="password" id="password" />
					</li>
					<li>					
						<input type="button" onclick="saveData()" value="Save data" data-icon="check"/>
					</li>						
				</ul>
			</form>

		</div>

		<div data-role="footer" data-position="fixed">
			<h1>RCondezo &copy; 2013</h1>
		</div>
	</div>

</body>

</html>